<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { NFlex, NCard, NIcon, NButton, NInput, NBadge, createDiscreteApi, NInputGroup, NModal, NCheckbox, NGrid, NGridItem, NStatistic } from 'naive-ui';
import SvgIcon from './SvgIcon.vue';
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import { sseUrl } from "@/service/sseUrl";
// import Papa from "papaparse";
import { USER_LIST, CHAT_SAVE, CHAT_DEL, USER_SEARCH } from "@/service/apis/from";
import { useCounterStore } from '@/stores/counter';
import ComponentsSelectFriends from './ComponentsSelectFriends.vue';
const { message } = createDiscreteApi(["message"])


const counterStore = useCounterStore()

//接收props
const props = defineProps({
  isChatShow: {
    type: Boolean
  },
})

const isChat = ref(1)
const flag = ref('chat')
const isInput = ref(false)
const isInput1 = ref(false)
const filterlist = ref<any>([])
const maifilterList = ref<any>([])

const contactfilterlist = ref<any>([])
const contactList = ref<any>([])

const searchValue = ref()
const smsg = ref()
const listIndex = ref(0)
const contactlistIndex = ref()
const myselfInfo = ref<any>({})
const chatDetails = ref<any>({
  姓名: '',
  name: '',
  img: '',
})
const contactDetails = ref<any>({
  name: '',
  img: '',
  phone: '',
  zhiwu: ''
})


// const testClass = ref(class1)
const chatList = ref<any>([])

const chatLists = ref<any>([]);
const myFriendsList = ref()
const ltwjm = ref()

// chatDetails.value = chatLists.value[0]

onMounted(() => {
  //构建SSE连接
  sseServiceOpen()
  getUserList()
  myselfInfo.value = counterStore.info
  myselfInfo.value.jian = myselfInfo.value.姓名.substring(myselfInfo.value.姓名.length - 2, myselfInfo.value.姓名.length)
  CHAT_SAVE({ type: "初始用户", param: myselfInfo.value['工号'] })

})
onUnmounted(() => {
  sseService.disconnect()
})

// see 链接
const sseServiceOpen = () => {
  const onopen = () => {
    console.log("聊天sse连接成功")
  }
  // 建立连接
  let sseChatParams: SSEChatParams = {
    onopen,
    url: sseUrl.jslt, //  + '/' + counterStore.info['工号'],
    onmessage: (event: MessageEvent) => {
      // 收到消息
      console.log('SSE聊天', event.data);
      let strArr = JSON.parse(event.data)
      if (strArr['类型'] == '好友列表') {
        let friends = strArr['数据']
        for (let index = 0; index < friends.length; index++) {
          const element: any = friends[index];
          if (element.姓名.length > 2) {
            element.jian = element.姓名.substring(element.姓名.length - 2, element.姓名.length)
            element.itemRight = false
          } else {
            element.jian = element.姓名
            element.itemRight = false
          }
        }
        myFriendsList.value = friends
      } else {
        let arr1 = strArr['数据']
        console.log('聊天数据', arr1, listIndex.value);
        if (arr1.length === 0) {
          return
        }
        for (let index = 0; index < arr1.length; index++) {
          const element: any = arr1[index];
          if (element.聊天组别名.length > 2) {
            element.jian = element.聊天组别名.substring(element.聊天组别名.length - 2, element.聊天组别名.length)
            element.itemRight = false
          } else {
            element.jian = element.聊天组别名
            element.itemRight = false
          }
          if (element.聊天内容.length > 0) {
            const lastChat = element.聊天内容[element.聊天内容.length - 1]
            // 给定的日期时间字符串  
            const dateTimeStr = lastChat.时间 // 格式 "2024/11/5 10:15:55";  
            element.time = formatTime(dateTimeStr)
          }

          element.聊天内容.forEach((item: any) => {
            if (item.姓名.length > 2) {
              item.jian = item.姓名.substring(item.姓名.length - 2, item.姓名.length)
            } else {
              item.jian = item.姓名
            }
          })
        }
        chatLists.value = arr1
        chatList.value = listIndex.value ? arr1[listIndex.value]['聊天内容'] : arr1[0]['聊天内容']
        ltwjm.value = listIndex.value ? arr1[listIndex.value]['聊天文件名'] : arr1[0]['聊天文件名']
      }

      scrollToChatBottom()
    },
    finallyHandler: () => {
      console.log("finallyHandler操作")
    }
  };
  sseService.connect(sseChatParams)
}

function formatTime(dateTimeStr: string) {
  // 解析字符串为Date对象  
  const dateTime = new Date(dateTimeStr);
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 重置时间为当天的00:00:00  
  // 获取明天的Date对象  
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);
  let theTimeStr = '2024';
  // 检查给定的日期时间是否是今天  
  if (dateTime >= today && dateTime < tomorrow) {
    // 如果是今天，则显示时分  
    const timeStr = dateTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    theTimeStr = timeStr;
  } else {
    // 如果不是今天，则显示年月日  
    const dateStr = dateTime.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
    theTimeStr = dateStr; // 输出: 2024/11/05（注意：这里可能需要根据需求调整格式）  
  }
  return theTimeStr;
}
function scrollToChatBottom() {
  setTimeout(() => {
    const scrollableDiv = document.getElementById('scrollChatListRef');
    console.log(scrollableDiv);
    if (scrollableDiv) {
      scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
    }
  }, 100);
}
//获取好友
const getUserList = () => {
  USER_LIST({ params: '{}' }).then((res: any) => {
    if (res.stacode == 200) {
      let arr = res.data
      for (let index = 0; index < arr.length; index++) {
        const element: any = arr[index];
        if (element.姓名.length > 2) {
          element.jian = element.姓名.substring(element.姓名.length - 2, element.姓名.length)
          element.isFriend = false
        } else {
          element.jian = element.姓名
          element.isFriend = false
        }

      }
      contactList.value = arr
      // contactfilterlist.value= arr
    }
    console.log(contactList.value);
    console.log(contactfilterlist.value);

  }).catch((err) => {

  });
}


//聊天点击
const chatClick = () => {

  isInput1.value = false
  isInput.value = false
  isChat.value = 1
  // chatLists.value = list2
  resSetfalse(myFriendsList.value)
}
//联系人点击
const contactClick = () => {
  isInput1.value = false
  isInput.value = false
  isChat.value = 2
  resSetfalse(chatLists.value)
}

const itemClick = (val: any, index: number) => {
  console.log('item Click ', val, index);
  isInput1.value = false
  isInput.value = false
  listIndex.value = index
  chatDetails.value = val
  resSetfalse(chatLists.value)
  console.log('sss', val['聊天内容']);
  chatList.value = val['聊天内容']
  ltwjm.value = val['聊天文件名']
  scrollToChatBottom()
}
const contactItemClick = (val: any, index: number) => {
  contactlistIndex.value = index
  isInput1.value = false
  isInput.value = false
  contactDetails.value = val
  resSetfalse(myFriendsList.value)
}

const cancelInput = () => {
  setTimeout(() => {
    isInput.value = false
    searchValue.value = ''
    console.log('取消输入')
  }, 200);
}

const resSetfalse = (val: any) => {
  if (val) {
    val.forEach((item: any, index: number) => {
      item.itemRight = false
    })
  }
}


//好友列表删除
const contactRightDel = (val: any, num: number) => {
  // myFriendsList.value.splice(num, 1)
  console.log('删除好友', val);
  let p = {
    工号: myselfInfo.value.工号,
    好友: val.工号,

  }
  CHAT_DEL({ type: "好友", param: JSON.stringify(p) }).then((res: any) => {
  }).catch((err) => {
  });
}

const itemRightClick = (val: any, num: number) => {
  val.itemRight = !val.itemRight
  chatLists.value.forEach((item: any, index: number) => {
    if (index != num) {
      item.itemRight = false
    }
  })
}

//列表删除
const itemRightDel = (val: any, num: number) => {
  // chatLists.value.splice(num, 1)
  console.log('删除对话', val);
  let p = {
    聊天文件名: val.聊天文件名,

  }
  CHAT_DEL({ type: "对话", param: JSON.stringify(p) }).then((res: any) => {
  }).catch((err) => {
  });

}

//聊天搜索框点击
const searchClick = () => {
  console.log('聊天搜索框点击筛选');
  isInput.value = true
  if (searchValue.value === undefined || searchValue.value === '')  {
    filterlist.value = chatLists.value.map((item: any, index: number) => ({
      index,
      ...item,
    }))
  }
}
const searchInput = () => {
  const arr = chatLists.value.map((item: any, index: number) => ({
    index,
    ...item,
  }))
  if (searchValue.value !== '' && searchValue.value !== undefined) {
    filterlist.value = arr.filter((item: any) => item.聊天组别名.indexOf(searchValue.value) > -1)
  } else {
    filterlist.value = arr
  }
}
//联系人搜索框点击
const contactsearchClick = () => {
  // debugger
  isInput1.value = true
  console.log(counterStore.info['工号']);
  let gh = counterStore.info['工号']
  if (searchValue.value == '' || searchValue.value == undefined) {
    maifilterList.value = [...myFriendsList.value]
    let arr = JSON.parse(JSON.stringify(contactList.value));
    maifilterList.value.forEach((element: any) => {
      let index = arr.findIndex((item: any) => item['工号'] === element['工号']);
      if (index !== -1) {
        arr.splice(index, 1);
      } else {
        contactfilterlist.value = arr;
      }
    });
    let ghIndex = arr.findIndex((item: any) => item['工号'] === gh);
    if (ghIndex !== -1) {
      arr.splice(ghIndex, 1);
    } else {
      contactfilterlist.value = arr;
    }
  } else {
    maifilterList.value = myFriendsList.value.filter((item: any) => {
      if (item.姓名.indexOf(searchValue.value) > -1) {
        return item
      }
    })
    contactfilterlist.value = contactfilterlist.value.filter((item: any) => {
      if (item.姓名.indexOf(searchValue.value) > -1) {
        return item
      }
    })
  }
  console.log('1');
}

const contactsearchInput = () => {
  if (searchValue.value == '') {
    //   contactfilterlist.value = []
    contactsearchClick()
  } else {
    console.log(searchValue.value);

    maifilterList.value = myFriendsList.value.filter((item: any) => {
      if (item.姓名.indexOf(searchValue.value) > -1) {
        return item
      }
    })
    contactfilterlist.value = contactfilterlist.value.filter((item: any) => {
      if (item.姓名.indexOf(searchValue.value) > -1) {
        return item
      }
    })
  }
}

const searchNewFriends = () => {
  if (searchValue.value === '') {
    isInput1.value = false
    return
  }
  isInput1.value = true
  let mergedArray = []
  if (myFriendsList.value) {
    const nameSearchList = myFriendsList.value.filter((item: any) => {
      if (item.姓名.indexOf(searchValue.value) > -1) {
        return item
      }
    })

    const codeSearchList = myFriendsList.value.filter((item: any) => {
      if (item.工号.indexOf(searchValue.value) > -1) {
        return item
      }
    })

    const phoneSearchList = myFriendsList.value.filter((item: any) => {
      if (item.手机号 && item.手机号.indexOf(searchValue.value) > -1) {
        return item
      }
    })

    mergedArray = [...nameSearchList, ...codeSearchList, ...phoneSearchList].reduce(
      (theArray, item) => {
        const index = theArray.findIndex((arrItem: any) => arrItem['工号'] === item['工号']);
        console.log(index);
        if (index === -1) { // 已经规约到的数组中，找到了新元素，说明新元素是重复元素，则不添加
          theArray.push(item);
        }
        return theArray;
      }, []);

    maifilterList.value = mergedArray
  }

  USER_SEARCH({ params: `{"值": "${searchValue.value}"}` }).then((res: any) => {
    if (res.stacode === 200) {
      // contactfilterlist.value = res.data
      const notFriendResult = res.data.filter((dataItem: any) => !mergedArray.some((friend: any) => dataItem.工号 === friend.工号));
      contactfilterlist.value = notFriendResult.map((item: any) => ({ ...item, jian: item.姓名.substring(item.姓名.length - 2, item.姓名.length) }))
    }
  }).catch((err) => {

  });
}

const contactItemRightClick = (val: any, num: number) => {
  val.itemRight = !val.itemRight
  myFriendsList.value.forEach((item: any, index: number) => {
    if (index != num) {
      item.itemRight = false
    }
  })
}

const sendMsg = (val: any) => {
  isChat.value = 1
  chatDetails.value = val

  let p = {
    聊天组别名: '',
    组成员: [counterStore.info, val]

  }
  CHAT_SAVE({ type: "对话", param: JSON.stringify(p) }).then((res: any) => {
    if (res.stacode === 200) {
      isShowNewFriendModal.value = false
    }
  }).catch((err) => {
  });
}

const groupChatName = ref('')
const makeGroupChat = (selectedFriends:any[]) => {
  const chaterCount = selectedFriends.length
  if (chaterCount === 1) {
    sendMsg(selectedFriends[0])
    isShowNewFriendModal.value = false
    return
  }

  let p = {
    聊天组别名: groupChatName.value || '群聊',
    组成员: [counterStore.info, ...selectedFriends]

  }
  console.log('创建群聊', p);
  CHAT_SAVE({ type: "对话", param: JSON.stringify(p) }).then((res: any) => {
    if (res.code === 200 || res.code === '200') {
      isShowNewFriendModal.value = false
    }
  }).catch((err) => {
  });
}

const handleEnterKey = () => {
  if (smsg.value != '' && smsg.value != undefined) {
    let p = {
      聊天文件名: ltwjm.value,
      聊天内容: {
        工号: counterStore.info['工号'],
        姓名: counterStore.info['姓名'],
        消息: smsg.value,
        时间: new Date().toLocaleString(),
      }
    }
    CHAT_SAVE({ type: "消息", param: JSON.stringify(p) }).then((res: any) => {
      scrollToChatBottom()
    }).catch((err) => {

    });
  } else {
    message.error('请输入内容再发送')
  }
  smsg.value = ''
}
//弹框列表点击
const chatInputItemClick = (val: any, num: number) => {
  console.log(val, num);
  itemClick(val, val.index)
}
//弹框列表点击
const contactInputItemClick = (val: any, num: number) => {
  console.log(val, num);
  contactItemClick(val, val.index)
}
//添加好友
const AddContactList = (val: any, num: number) => {
  console.log(val, num);

  let p = {
    用户: {
      工号: counterStore.info['工号'],
      姓名: counterStore.info['姓名'],
      手机号: counterStore.info['手机号'],
      部门: counterStore.info['部门'],
      职务: counterStore.info['职务'],
    },
    好友: {
      工号: val['工号'],
      姓名: val['姓名'],
      手机号: val['手机号'],
      部门: val['部门'],
      职务: val['职务'],
    }
  }

  CHAT_SAVE({ type: "好友", param: JSON.stringify(p) }).then((res: any) => {
    console.log('好有', res);
    val.isFriend = true
    let index = myFriendsList.value.findIndex((item: any) => item['工号'] === val['工号']);
    if (index !== -1) {
      myFriendsList.value.splice(index, 1, val);
    } else {
      myFriendsList.value.push(val);
    }
    isInput1.value = false
  }).catch((err) => {

  });

}

const emit = defineEmits(['update:isChatShow']);
const handleClose = () => {
  emit('update:isChatShow', false);
}

const isShowNewFriendModal = ref(false);
const showNewFriendModal = () => {
  groupChatName.value = '';
  selectCount.value = 0;
  isShowNewFriendModal.value = true;
}

const selectCount = ref(0);

</script>
<template>
  <div class="chat" v-show="props.isChatShow">
    <!-- 创建群聊弹框 -->
    <n-modal v-model:show="isShowNewFriendModal" preset="card" :title="selectCount > 1 ? '发起群聊' : '发起聊天'"
      style="width: 600px" closable>
      <ComponentsSelectFriends :friendsList="myFriendsList" v-model:select-count="selectCount" @submit="makeGroupChat"
        @cancel="() => isShowNewFriendModal = false">
        <template v-if="selectCount > 1" #right-area-bottom-extra>
          <n-input placeholder="给群聊起个名吧" v-model:value="groupChatName"/>
        </template>
      </ComponentsSelectFriends>
    </n-modal>
    <n-card title="即时通信" closable style="width: 100%; height: 100%;" @close="handleClose">
      <n-flex style="height: 100%;">
        <!-- 左侧菜单栏 -->
        <n-flex vertical :size="[0, 20]" class="menubar">
          <n-flex vertical class="menutop">
            
              <n-button :color="isChat == 1 ? '#cdcdcd' : ''" @click="chatClick">
                <n-icon>
                  <svg-icon iconClass="dianhua1" />
                </n-icon>
              </n-button>
           
            <n-button :color="isChat == 2 ? '#cdcdcd' : ''" @click="contactClick">
              <n-icon>
                <svg-icon :iconClass="isChat == 2 ? 'canguan' : 'guanyuwomen'" />
              </n-icon>
            </n-button>
          </n-flex>
          <n-flex class="menubottom">
            <n-button>
              <n-icon>
                <svg-icon iconClass="shezhi" />
              </n-icon>
            </n-button>
          </n-flex>
        </n-flex>
        <n-flex justify="space-between" class="chatcontent" :size="0">
          <n-flex vertical class="leftchat" :size="0">
            <n-flex v-if="isChat == 1" style="position: relative;">
              <n-input-group>
                <n-input v-model:value="searchValue" placeholder="查找最近聊天" :passively-activated="true" clearable
                  @focus="searchClick" @input="searchInput" :on-blur="cancelInput"></n-input>
                <n-button type="primary" @click="showNewFriendModal">+</n-button>
              </n-input-group>
              <div v-if="isInput" class="ul">
                <template v-for=" (item, index) in filterlist" :key="index">
                  <div class="li" @click.self="chatInputItemClick(item, index)">
                    <div class="imgbox" @click.self="chatInputItemClick(item, index)"> {{ item.jian }}</div>
                    <span style="margin-left: 10px" @click.self="chatInputItemClick(item, index)">{{ item.聊天组别名
                      }}</span>
                  </div>
                </template>
              </div>
            </n-flex>
            <!-- 最近聊天列表 -->
            <div v-if="isChat == 1" vertical style="height: calc(100vh / 1.45); overflow-y: auto;padding-top: 10px;"
              @click.self="isInput = false">
              <template v-for=" (item, index) in chatLists" :key="index">
                <div v-if="isChat == 1" class="ulbox" :class="{ liSelect: index == listIndex }"
                  @click="itemClick(item, index)" @click.right="itemRightClick(item, index)">
                  <div class="imgbox">{{ item.聊天组别名.slice(-2) }}</div>
                  <span style="margin-left: 5px;width: 70%;">
                    <span style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                      <span style="font-size: 14px;font-weight: 500;">{{ item.聊天组别名.substring(0, 7) }}</span>
                      <span style="font-size: 10px;color: gray;">{{ item.time }}</span>
                    </span>
                    <span style="font-size: 11px;display: block; color: gray;">{{ item.聊天内容.length ?
                      item.聊天内容[item.聊天内容.length - 1].消息.substring(0, 10)
                      : '' }}</span>
                  </span>
                  <div v-if="item.itemRight" class="itemRight" @click="itemRightDel(item, index)">
                    删除
                  </div>
                </div>
              </template>
            </div>
            <n-flex v-if="isChat == 2" style="position: relative;">
              <n-input-group>
                <n-input v-model:value="searchValue" placeholder="用户名/手机号/工号" :passively-activated="true"></n-input>
                <n-button type="primary" @click="searchNewFriends">
                  <svg-icon iconClass="fangda" />
                </n-button>

              </n-input-group>
              <div v-if="isInput1" class="ul">
                <div style="height: 20px;background-color: #fff;margin-top: 5px; margin-bottom: 5px;line-height: 20px;">
                  已添加
                </div>
                <template v-for=" (item, index) in maifilterList" :key="index">
                  <div class="li" @click="contactInputItemClick(item, index)">
                    <div class="imgbox"> {{ item.jian }}</div>
                    <span style="margin-left: 10px">{{ item.姓名 }}</span>
                  </div>
                </template>
                <div style="height: 20px;background-color: #fff;margin-top: 5px; margin-bottom: 5px;line-height: 20px;">
                  未添加
                </div>
                <template v-for=" (item, index) in contactfilterlist" :key="index">
                  <div class="li" @click="contactInputItemClick(item, index)">
                    <div class="imgbox"> {{ item.jian }}</div>
                    <span style="margin-left: 5px;font-size: 12px;">
                      <span style=" display: block;">{{ item.姓名 }}</span>
                      <span style=" display: block;">{{ item.手机号 }}</span>
                      <span style=" display: block;">{{ item.部门 }}</span>
                    </span>
                    <svg-icon v-if="!item.isFriend" iconClass="fangda1" className="icon"
                      @click.stop="AddContactList(item, index)" />
                  </div>
                </template>
              </div>
            </n-flex>
            <n-flex v-if="isChat == 2" vertical
              style=" width: 100%; height: calc(100vh / 1.45); overflow-y: auto;padding-top: 10px;"
              @click.self="isInput1 = false">
              我的好友
              <template v-for=" (item, index) in myFriendsList" :key="index">
                <div class="ulbox" :class="{ ulboxSelect: index == contactlistIndex }"
                  @click.right="contactItemRightClick(item, index)" @click.self="contactItemClick(item, index)">
                  <div class="imgbox" @click.self="contactItemClick(item, index)">{{ item.jian }}</div>
                  <span style="margin-left: 5px;font-size: 12px;">
                    <span style="display: block;font-weight: 500;font-size: 14px;"
                      @click.self="contactItemClick(item, index)">{{ item.姓名 }}</span>
                    <span style="display: block;" @click.self="contactItemClick(item, index)">{{ item.部门 }}</span>
                  </span>
                  <div v-if="item.itemRight" class="itemRight" @click="contactRightDel(item, index)">
                    删除
                  </div>
                </div>
              </template>
            </n-flex>
          </n-flex>
          <!-- 右侧聊天窗口 -->
          <n-flex v-if="isChat == 1 && listIndex != -1" vertical class="rightchat" @click.self="isInput = false">
            <n-flex style="width: 100%;">
              <n-flex
                style="width: 100%; height: 40px; align-items: center; padding: 0 10px; border-bottom: 1px solid #f8f0f0;">
                <div v-if="chatDetails" style="font-size: 16px; font-weight: 500;">{{ chatDetails.聊天组别名 }}</div>
                <div v-else>{{ '聊天对象' }}</div>
              </n-flex>
              <n-flex v-if="chatList.length > 0" vertical class="chatListBody" id="scrollChatListRef">
                <template v-for=" (i, k) in chatList">
                  <div>
                    <n-flex v-if="i.工号 !== counterStore.info['工号']">
                      <div class="imgbox">{{ i.jian }}</div>
                      <div style="display: flex;">
                        <div class="chatBodyTipLeft"></div>
                        <div>
                          <div class="message" style="background-color: #eee;">{{ i.消息 }} </div>
                          <span class="messageTime">{{ formatTime(i.时间) }}</span>
                        </div>
                      </div>
                    </n-flex>
                    <n-flex v-if="i.工号 == counterStore.info['工号']" justify="end">
                      <div style="display: flex;">
                        <div>
                          <div class="message">{{ i.消息 }}</div>
                          <span class="messageTime">{{ formatTime(i.时间) }}</span>
                        </div>
                        <div class="chatBodyTipRight"></div>
                      </div>
                      <div class="imgbox">{{ myselfInfo.jian }}</div>
                    </n-flex>
                  </div>
                </template>
              </n-flex>
            </n-flex>
            <n-flex v-if="chatList.length > 0" style="height: 100px;">
              <n-input placeholder="请输入消息" v-model:value="smsg" @keydown.enter="handleEnterKey"></n-input>
            </n-flex>
            <n-flex v-if="chatList.length == 0" style="height: 100px;position: relative;top: 73.5%;">
              <n-input placeholder="请输入消息" v-model:value="smsg" @keydown.enter="handleEnterKey"></n-input>
            </n-flex>
          </n-flex>
          <n-flex v-if="isChat == 2" vertical class="rightchat" style="" @click.self="isInput1 = false">
            <div v-if="contactDetails.name != ''" style="margin-top: 10%; text-align: center;">
              <div class="detailsImg" style="display: inline-block; margin-left: -350px;">{{ contactDetails.姓名 }}</div>
              <div style="margin-left: 0px;font-size: 20px;margin-top: 20px;">
                <!-- <div style="display: block;">姓名：{{ contactDetails.姓名 }}</div>
                <div style="display: block;">部门：{{ contactDetails.部门 }}</div>
                <div style="display: block;">职务：{{ contactDetails.职务 }}</div>
                <div style="display: block;">手机号：{{ contactDetails.手机号 }}</div> -->
                <div>
                  <n-statistic style="margin-bottom: 20px; width: 220px; display: inline-block; text-align: left;"
                    label="姓名" :value="contactDetails.姓名" />
                  <n-statistic style="margin-bottom: 20px; width: 220px; display: inline-block; text-align: left;"
                    label="手机号" :value="contactDetails.手机号" />
                </div>
                <div>
                  <n-statistic style="margin-bottom: 20px; width: 220px; display: inline-block; text-align: left;"
                    label="部门" :value="contactDetails.部门" />
                  <n-statistic style="margin-bottom: 20px; width: 220px; display: inline-block; text-align: left;"
                    label="职务" :value="contactDetails.职务 || '-'" />
                </div>
              </div>

              <n-button style="margin-top: 25px; margin-left: -380px;" @click="sendMsg(contactDetails)">发消息</n-button>
              <!-- <n-button style="margin-top: 40px;" @click="name(contactDetails)">发送ss信息</n-button> -->
            </div>
          </n-flex>
        </n-flex>
      </n-flex>
    </n-card>
  </div>
</template>
<style scoped>
.chat {
  position: fixed;
  bottom: calc(100vh / 9.4);
  left: calc(100vw / 6);
  width: calc(100vw / 1.5);
  height: calc(100vh / 1.2);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.menubar {
  flex-basis: 20px;
  height: 100%;
}

.menubar .menutop {
  height: 50%;
}

.menubar .menubottom {
  height: 50%;

  align-items: flex-end;
  border: 0px solid #e54a4a;
}

.chatcontent {
  flex-basis: 400px;
  flex-grow: 1;
  flex-shrink: 1;

}

.leftchat {
  flex-basis: 200px;
  flex-shrink: 1;
  border: 1px solid #f8f0f0;
}

.rightchat {
  flex-basis: 400px;
  flex-grow: 1;
  flex-shrink: 1;

  border: 1px solid #f8f0f0;
}

.ulbox {
  height: 60px;
  padding-left: 10px;
  display: flex;
  justify-items: center;
  align-items: center;
  /* border: 1px solid #eee; */
  position: relative;
  /* border-radius: 10px; */
}

.ulboxSelect {
  display: flex;
  justify-items: center;
  align-items: center;
  /* border: 1px solid #eee; */
  position: relative;
  /* border-radius: 10px; */
  background-color: #d3d3d3;
}

.ul {
  height: 300px;
  position: absolute;
  top: 33px;
  right: 0;
  left: 0px;
  z-index: 10;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #eee;
  overflow-y: scroll;
  box-shadow: 5px 5px 5px #a39f9f;
}

.li {
  display: flex;
  justify-items: center;
  align-items: center;
  /* border: 1px solid #eee; */
  background-color: #fff;
  /* border-radius: 10px; */
  margin-bottom: 5px;
  position: relative;
}

.liSelect {
  display: flex;
  justify-items: center;
  align-items: center;
  /* border: 1px solid #eee; */
  background-color: #d3d3d3;
  /* border-radius: 10px; */
  /* margin-bottom: 5px; */
  position: relative;
}

.imgbox {
  /* background-color: #3f80fc; */
  font-size: 15px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  color: #000;
  text-align: center;
  background: url(../assets/image/head.png) no-repeat;
  background-size: cover;
}

.itemRight {
  position: absolute;
  bottom: -10px;
  right: 0;
  height: 30px;
  width: 80px;
  line-height: 30px;
  background-color: #e4e4e4;
  border: 1px solid #eee;
  border-radius: 5px;
  text-align: center;
}

.detailsImg {
  /* background-color: #3f80fc; */
  width: 100px;
  height: 100px;
  border-radius: 10px;
  line-height: 100px;
  color: #000;
  text-align: center;
  font-size: 24px;
  background: url(../assets/image/head.png) no-repeat;
  background-size: cover;
}

.icon {
  position: absolute;
  right: 5px;
}

.h3 {
  background-color: #3f80fc;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 15px;
}

.message {
  background-color: rgb(30, 220, 90);
  line-height: 28px;
  border-radius: 5px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  max-width: 300px
}

.messageTime {
  color: #999;
  font-size: 10px;
  margin-left: 5px;
  display: block;
}

.chatListBody {
  width: 100%;
  height: calc(100vh / 1.9);
  overflow-y: auto;
  padding: 10px;
}

.chatBodyTipLeft {
  margin-top: 12px;
  border-left: 6px solid #fff;
  border-top: 6px solid #eee;
}

.chatBodyTipRight {
  margin-top: 12px;
  border-right: 6px solid #fff;
  border-top: 6px solid rgb(30, 220, 90);
}
</style>